<template>
  <div>
    <div class="block">
        <!-- <el-carousel height="300px" width="70%"> -->
        <el-carousel height="20vw" :interval="5000">
        <el-carousel-item v-for="item in items" :key="item.title">
          <el-image :src="item.url" style="width:100%;height: 100%;" fit="cover"></el-image>
<!--          <el-image :src="item.url" fit="cover" width="100%" height="300px"></el-image> -->
        </el-carousel-item>
        </el-carousel>
    </div>
    <div style="margin-top:30px">
      <el-row>
        <el-col v-for="product in products" :key="product.id" :span="6" style="padding:5px">
          <el-card class="product-card">
            <el-image style="width: 100px; height: 100px" :src="product.image" :preview-src-list="[product.image]" alt="Product Image"></el-image>
            <div class="product-info">
              <h3 class="product-name">{{ product.name}}</h3>
              <p class="product-price">{{ product.price|formatPrice}}</p>
              <p class="product-description">{{ product.description}}</p>
              <el-button style="margin-top:5px;"  type="primary" @click="buyProduct(product)" icon="el-icon-shopping-cart-2" size="small">购买</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request"

export default {
    name:"Home",
    data(){
      return{
        user:null,
        items:[
          {
            // url: 'https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg',
            url: 'https://www.chali.com/assets/images/banner.3c6c1f8.jpg',
            title: '第一章',
            subtitle: '...'
          },
          {
            // url: 'https://gtms01.alicdn.com/tps/i2/TB10vPXKpXXXXacXXXXvKyzTVXX-520-280.jpg',
            url: 'http://www.the-alleytea.cn/static/images/banner1.jpg',
            title: '第二章',
            subtitle: '...'
          },
          {
            // url: 'https://gtms01.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg',
            url: 'https://www.chali.com/assets/images/banner.5a6ea16.jpg',
            title: '第三章',
            subtitle: '...'
          }
        ],
        products: [
            {
              id: 1,
              name: 'Product 1',
              price: '$10',
              description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
              // image: 'product1.jpg'
            },
            {
              id: 2,
              name: 'Product 2',
              price: '$20',
              description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
              // image: 'product2.jpg'
            },
            {
              id: 3,
              name: 'Product 1',
              price: '$10',
              description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
              // image: 'product1.jpg'
            },
            {
              id: 4,
              name: 'Product 2',
              price: '$20',
              description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
              // image: 'product2.jpg'
            },
          ],
        cart:{}
      }
    },
    created(){
      this.user = this.$store.state.user
      this.loadCommodity()
    },
    methods:{
      loadCommodity(){
        request.get("/commodity/getAllCommodity").then(res=>{
            this.products = res.data.commodity
        })
      },
      buyProduct(product){
        console.log('product---- :>> ', product);
        //修改对象
        this.cart.checked = 2;
        this.cart.number = 1;
        this.cart.commodity = product
        if(this.user!=null){
          request.post("/cart/addCart?userId="+this.user.id,this.cart).then(res=>{
            console.log('res.result----addCart :>> ', res.result);
            if(res.result){
                this.$message({
                type:"success",
                message:"成功加入购物车"
              })
            }else{
                this.$message({
                type:"warning",
                message:"加入购物车失败"
              })
            }
          })
        }else{
          this.$message({
              type:"warning",
              message:"请先登录"
            })
          this.$router.push("/login")
        }

        //弹窗
        
      }
    },
    filters:{
      formatPrice(val){
        return val+"￥"
      }
    }
}
</script>

<style scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
.product-card {
  width: 100%;
  margin-bottom: 20px;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 10px;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.product-price {
  font-size: 16px;
  margin: 5px 0;
}

.product-description {
  font-size: 14px;
  margin: 0;
}
</style>